<template>
  <div class="app-container">
    <el-card>
      <!--用户数据-->
      <el-form :model="queryParams" ref="queryForm" size="small" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="实践课程">
              <el-select v-model="queryParams.practiceType" placeholder="请选择" @change="changeType">
                <el-option v-for="item in practiceTypeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="实践任务名称">
              <el-select v-model="queryParams.practiceTestId" filterable clearable @change="handleQuery">
                <el-option v-for="item in selectorList" :key="item.id" :label="item.taskName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷名称">
              <el-select v-model="queryParams.testPaperId" placeholder="请选择" clearable @change="handleQuery">
                <el-option v-for="item in paperList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->

          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model.trim="queryParams.studentName" @input="handleQuery" placeholder="输入内容" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学号">
              <el-input v-model.trim="queryParams.stNumber" @input="handleQuery" placeholder="输入内容" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="时间">
              <el-date-picker v-model="dateRangeQuery" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                @change="handleQuery" style="width: 100%" start-placeholder="起始日期"
                end-placeholder="截至日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="学院">
              <el-select v-model="queryParams.xyId" filterable clearable @change="handleQuery('学院')">
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专业">
              <el-select v-model="queryParams.zyId" filterable clearable @change="handleQuery('专业')">
                <el-option v-for="item in prozyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年级">
              <el-select v-model="queryParams.nj" clearable @change="handleQuery('年级')">
                <el-option v-for="item in pronjAllList" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="班级">
              <el-select v-model="queryParams.bjId" filterable clearable @change="handleQuery">
                <el-option v-for="item in probjList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学期">
              <el-select v-model="queryParams.semesterConfigId" filterable clearable @change="handleQuery">
                <el-option v-for="item in semestList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item label-width="20px">
              <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" :disabled="tableList.length === 0" plain icon="el-icon-plus" size="mini"
            v-hasPermi="['score:export:scoreExport']" @click="handleExport">导出</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="tableList">
        <el-table-column type="index" align="center" />
        <el-table-column label="学生姓名" width="80" align="center" key="studentName" prop="studentName"
          :show-overflow-tooltip="true" />
        <el-table-column label="学号" align="center" key="stNumber" prop="stNumber" :show-overflow-tooltip="true" />
        <el-table-column label="学院" align="center" key="xyName" prop="xyName" :show-overflow-tooltip="true" />
        <el-table-column label="专业" align="center" key="zyName" prop="zyName" :show-overflow-tooltip="true" />
        <el-table-column label="班级" align="center" key="bjName" prop="bjName" :show-overflow-tooltip="true" />
        <el-table-column label="年级" width="70" align="center" key="nj" prop="nj" :show-overflow-tooltip="true" />
        <el-table-column label="实践课程" align="center" key="practiceName" prop="practiceName"
          :show-overflow-tooltip="true" />
        <el-table-column label="实践任务积分" align="center" key="practicePoints" prop="practicePoints"
          :show-overflow-tooltip="true" />
        <el-table-column label="实践任务成绩" align="center" key="practiceScore" prop="practiceScore"
          :show-overflow-tooltip="true" />
        <el-table-column label="知识问答积分" align="center" key="testPaperPoints" prop="testPaperPoints"
          :show-overflow-tooltip="true" />
        <el-table-column label="知识问答成绩" align="center" key="testPaperScore" prop="testPaperScore"
          :show-overflow-tooltip="true" />
        <el-table-column label="总积分" width="70" align="center" key="allPoints" prop="allPoints"
          :show-overflow-tooltip="true" />
        <el-table-column label="总成绩" width="70" align="center" key="allScore" prop="allScore"
          :show-overflow-tooltip="true" />
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
import { projectList, typeCongfigList } from "@/api/semesManage";
import { selectorListTaks } from "@/api/task/index";
import { exportPointsList, paperForList, scoreExport } from "@/api/achievePoints";
import { listProxy, listProzy, listProbj, pronjList } from "@/api/project/prold";
export default {
  name: "integralExport",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      tableList: [],
      dateRangeQuery: [], // 查询
      proxyList: [], // 学院
      pronjAllList: [], // 年级
      prozyList: [], // 专业
      probjList: [], // 年级
      practiceTypeList: [], // 实践课程
      selectorList: [], // 任务列表
      paperList: [], // 试卷列表
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        practiceType: undefined,
        practiceTestId: undefined,
        testPaperId: undefined,
        xyId: undefined,
        zyId: undefined,
        bjId: undefined,
        studentName: undefined,
        stNumber: undefined,
        startTime: undefined,
        endTime: undefined
      },
      oldDataType: undefined,
      semestList: []
    };
  },
  created() {
    // const permissList = sessionStorage.getItem('practiceTypes').split(',');
    // const typeMap = {
    //   1: { type: '劳动教育', id: 1 },
    //   2: { type: '职业素养', id: 2 },
    //   3: { type: '应急安全', id: 3 },
    //   4: { type: '思政实践', id: 4 },
    //   5: { type: '创新创业', id: 5 }
    // };

    // permissList.forEach(v => {
    //   if (typeMap[v]) {
    //     this.practiceTypeList.push(typeMap[v]);
    //   }
    // });
    this.getTypeCongfigList();
    this.getListProxy();
    this.getListPronj();
    this.getSemestList();
    // this.getSelectorListTaks();
    // this.getPaperForList();
    // this.getListProzy();
    // this.getListProbj();
  },
  methods: {
    getTypeCongfigList() {
      typeCongfigList({
        pageNum: 1,
        pageSize: 50,
      }).then(res => {
        this.practiceTypeList = res.rows;
        this.queryParams.practiceType = this.practiceTypeList[0].id;
        this.oldDataType = this.practiceTypeList[0].id;
        if (this.queryParams.practiceType) {
          this.getList();
        }
      });
    },
    /** 查询学期列表 */
    getSemestList() {
      projectList({}).then(res => {
        this.semestList = res.rows;
      });
    },
    // 列表
    getList() {
      const time = this.dateRangeQuery && this.dateRangeQuery.length > 0 ? { startTime: this.dateRangeQuery[0] + ' 00:00:00', endTime: this.dateRangeQuery[1] + ' 23:59:59' } : {};
      exportPointsList({ ...this.queryParams, ...time }).then(res => {
        this.total = res.total;
        this.tableList = res.rows;
        this.oldDataType = this.queryParams.practiceType;
      }).catch(err => {
        this.queryParams.practiceType = this.oldDataType;
      });
    },
    // 查询学院
    getListProxy() {
      listProxy().then((response) => {
        this.proxyList = [];
        response.rows.forEach((v) => this.proxyList.push(v));

        if (response.rows.length > 0) {
          this.getListProzy(this.proxyList.map(v => v.id));
        }
      });
    },
    // 查询专业
    getListProzy(id) {
      listProzy({ xyIds: this.queryParams.xyId || id }).then((response) => {
        this.prozyList = [];
        this.probjList = [];
        response.rows.forEach((v) => this.prozyList.push(v));

        if (response.rows.length > 0) {
          this.getListProbj();
        }
      });
    },
    // 查询班级
    getListProbj() {
      listProbj({ zyIds: this.queryParams.zyId && this.queryParams.zyId.length > 0 ? this.queryParams.zyId : this.prozyList.map(v => v.id), njIds: this.queryParams.nj || this.pronjAllList.map(v => v.name) }).then((response) => {
        this.probjList = [];
        response.rows.forEach((v) => this.probjList.push(v));
      });
    },
    // 查询年级
    getListPronj() {
      pronjList().then((response) => {
        this.pronjAllList = response.rows;
      });
    },
    // 查询任务名
    getSelectorListTaks() {
      selectorListTaks({ practiceType: this.queryParams.practiceType, taskNameSort: 'desc' }).then(response => {
        this.selectorList = response.rows;
      })
    },
    // 查询试卷名
    getPaperForList() {
      paperForList().then(res => {
        this.paperList = res.rows;
      })
    },
    changeType() {
      this.getSelectorListTaks();
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery(type) {
      this.queryParams.pageNum = 1;
      if (type == '学院') {
        this.prozyList = [];
        this.queryParams.zyId = undefined;
        this.getListProzy(this.queryParams.faceXy);
      }
      if (type == '专业' || type == '年级') {
        this.queryParams.bjId = undefined;
        this.getListProbj();
      }
      if (this.queryParams.practiceType) {
        this.getList();
      }
    },
    // 重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        practiceType: this.practiceTypeList[0].id,
        practiceTestId: undefined,
        testPaperId: undefined,
        xyId: undefined,
        zyId: undefined,
        bjId: undefined,
        nj: undefined,
        studentName: undefined,
        stNumber: undefined,
        startTime: undefined,
        endTime: undefined
      };
      this.dateRangeQuery = [];
      if (this.queryParams.practiceType) {
        this.getListProxy();
        this.getListPronj();
        this.getList();
      }
    },

    /** 导出按钮操作 */
    handleExport() {
      const time = this.dateRangeQuery && this.dateRangeQuery.length > 0 ? { startTime: this.dateRangeQuery[0] + ' 00:00:00', endTime: this.dateRangeQuery[1] + ' 23:59:59' } : {};
      this.download('score/export/scoreExport', {
        ...this.queryParams,
        ...time
      }, `成绩导出.xlsx`)
    }
  },
};
</script>
<style scoped lang="scss">
.el-select {
  width: 100%;
}
</style>
